﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>部门管理</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=317"/>
    <link rel="stylesheet" href="../../../assets/module/treeTable/treeTable.css"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /* 左树 */
        #organizationTreeBar {
            padding: 10px 15px;
            border: 1px solid #e6e6e6;
            background-color: #f2f2f2;
        }

        #organizationTree {
            border: 1px solid #e6e6e6;
            border-top: none;
            padding: 10px 5px;
            overflow: auto;
            height: -webkit-calc(100vh - 125px);
            height: -moz-calc(100vh - 125px);
            height: calc(100vh - 125px);
        }

        .layui-tree-entry .layui-tree-txt {
            padding: 0 5px;
            border: 1px transparent solid;
            text-decoration: none !important;
        }

        .layui-tree-entry.ew-tree-click .layui-tree-txt {
            background-color: #fff3e0;
            border: 1px #FFE6B0 solid;
        }

        /* 右表搜索表单 */
        #organizationUserTbSearchForm .layui-form-label {
            box-sizing: border-box !important;
            width: 90px !important;
        }

        #organizationUserTbSearchForm .layui-input-block {
            margin-left: 90px !important;
        }
    </style>
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid" style="padding-bottom: 0;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <!-- 树工具栏 -->
                    <div class="layui-form toolbar" id="organizationTreeBar">
                        <button id="organizationAddBtn" class="layui-btn layui-btn-sm icon-btn">
                            <i class="layui-icon">&#xe654;</i>添加
                        </button>&nbsp;
                        <button id="organizationEditBtn" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
                            <i class="layui-icon">&#xe642;</i>修改
                        </button>&nbsp;
                        <button id="organizationDelBtn"
                                class="layui-btn layui-btn-sm layui-btn-danger icon-btn">
                            <i class="layui-icon">&#xe640;</i>删除
                        </button>
                    </div>
                    <!-- 左树 -->
                    <div id="organizationTree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <!-- 数据表格 -->
                    <table id="organizationUserTable" lay-filter="organizationUserTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 表单弹窗1 -->
<script type="text/html" id="organizationEditDialog">
    <form id="organizationEditForm" lay-filter="organizationEditForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <input name="organizationId" type="hidden"/>
        <div class="layui-row">
            <div class="layui-col-md10">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">上级组织:</label>
                    <div class="layui-input-block">
                        <div id="organizationEditParentSel" class="ew-xmselect-tree"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">组织名称:</label>
                    <div class="layui-input-block">
                        <input name="orgName" placeholder="请输入组织名称" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">组织编码:</label>
                    <div class="layui-input-block">
                        <input name="orgCode" placeholder="请输入组织编码" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">组织类型:</label>
                    <div class="layui-input-block">
                        <select name="orgType" lay-verify="required">
                            <option value="1">部门</option>
                            <option value="2">管理</option>
                            <option value="3">班组</option>
                            <option value="-1">外协</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号:</label>
                    <div class="layui-input-block">
                        <input name="sort" value="100" placeholder="排序号" class="layui-input"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="organizationEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="organizationUserTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表格工具列 -->
<script type="text/html" id="organizationUserTbToolBar">
    <button lay-event="editUserOrg" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
        <i class="layui-icon">&#xe642;</i>修改
    </button>&nbsp;
    <button lay-event="leave" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
        <i class="layui-icon">&#xe642;</i>离职
    </button>&nbsp;
</script>
<script type="text/html" id="userEditDialog">
    <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
        <input name="userId" type="hidden"/>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">部门:</label>
            <div class="layui-input-block">
                <input id="cascader" name="orgId" value=""/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <a class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</a>
            <a class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</a>
        </div>
    </form>
</script>
<!-- 表单弹窗 -->

<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'cascader', 'admin', 'tree', 'dropdown', 'xmSelect', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var tree = layui.tree;
        var xmSelect = layui.xmSelect;
        var cascader = layui.cascader;
        var selObj, treeData;  // 左树选中数据
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#organizationUserTable',
            page: true,
            toolbar: '#organizationUserTbToolBar',
            request: {
                pageName: 'page',
                limitName: 'rows',
            },
            height: 'full-52',
            // toolbar: '#organizationUserTbToolBar',
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers'},
                {type: 'checkbox', width: 50},
                {field: 'account', title: '账号',},
                {field: 'trueName', title: '用户名',},
                {field: 'roles', title: '角色',},
                // {title: '操作', toolbar: '#organizationUserTbBar', align: 'center', width: 120, minWidth: 120}
            ]],
            done: function (res) {
                form.on('submit(organizationUserTbSearch)', function (data) {
                    insTb.reload({where: data.field, page: {curr: 1}});
                    return false;
                });
            }
        });

        /* 渲染树形 */
        function renderTree() {
            $.post('/office/org/getOrgTree', function (res) {
                for (var i = 0; i < res.obj.length; i++) {
                    res.data = res.obj;
                    res.data[i].title = res.data[i].organizationName;
                    res.data[i].id = res.data[i].id;
                    res.data[i].spread = true;
                }
                treeData = layui.treeTable.pidToChildren(res.data, 'id', 'parentOrgId');
                tree.render({
                    elem: '#organizationTree',
                    onlyIconControl: true,
                    data: treeData,
                    click: function (obj) {
                        selObj = obj;//当前点击组织
                        $('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        insTb.reload({
                            where: {orgId: obj.data.id, status: 1},
                            page: {curr: 1},
                            url: '/office/org/queryUserList',
                            parseData: function (res) {
                                return {
                                    "code": 0,
                                    "msg": "",
                                    "count": res.obj.total,
                                    "data": res.obj.rows
                                }
                            },
                        });
                    }
                });
                $('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
            });
        }

        renderTree();
        /* 添加 */
        $('#organizationAddBtn').click(function () {
            showEditModel(null, selObj ? selObj.data.id : null);
        });

        /* 修改 */
        $('#organizationEditBtn').click(function () {
            if (!selObj) return layer.msg('未选择组织', {icon: 2});
            showEditModel(selObj.data);
        });

        /* 删除 */
        $('#organizationDelBtn').click(function () {
            if (!selObj) return layer.msg('未选择组织', {icon: 2});
            doDel(selObj);
        });

        /* 显示表单弹窗 */
        function showEditModel(mData, pid) {
            admin.open({
                type: 1,
                area: '600px',
                title: (mData ? '修改' : '添加') + '组织',
                content: $('#organizationEditDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    let data = {};
                    if (mData) {
                        data = {
                            orgCode: mData.orgCode,
                            orgName: mData.organizationName,
                            parentOrgId: mData.parentOrgId,
                            sort: mData.sort
                        }
                    }
                    form.val('organizationEditForm', data);
                    // 表单提交事件
                    form.on('submit(organizationEditSubmit)', function (data) {
                        data.field.parentId = insXmSel.getValue('valueStr');
                        var loadIndex = layer.load(2);
                        let param = data.field;
                        param.parentOrgId = data.field.parentId;
                        $.post(mData ? '/office/org/updateOrg' : '/office/org/addOrg', data.field, function (res) {
                            layer.close(loadIndex);
                            if (200 === res.code) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                renderTree();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                    // 渲染下拉树
                    var insXmSel = xmSelect.render({
                        el: '#organizationEditParentSel',
                        height: '250px',
                        data: treeData,
                        initValue: mData ? [mData.parentOrgId] : (pid ? [pid] : []),
                        model: {label: {type: 'text'}},
                        prop: {
                            name: 'organizationName',
                            value: 'id'
                        },
                        radio: true,
                        clickClose: true,
                        tree: {
                            show: true,
                            indent: 15,
                            strict: false,
                            expandedKeys: true
                        }
                    });
                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除此组织吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('/office/org/deleteOrg', {
                    orgId: obj.data.id,
                }, function (res) {
                    layer.close(loadIndex);
                    if (200 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        renderTree();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

        /* 表格工具条点击事件 */
        table.on('tool(organizationUserTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel2(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel2(obj);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(organizationUserTable)', function (obj) {
            if (obj.event === 'editUserOrg') {
                var rows = table.checkStatus('organizationUserTable').data
                if (rows.length === 0) {
                    showAlert('请选择一条记录');
                    return
                }
                showEditModel2(rows);
            } else if (obj.event === 'leave') {
                var rows = table.checkStatus('organizationUserTable').data
                if (rows.length === 0) {
                    showAlert('请选择一条记录');
                    return
                }

                layer.confirm(`是否将选中员工设为离职`, function () {
                    let count=0
                    rows.map(item=>{
                        $.post('/office/user/leave', {account: item.account}, function (res) {
                            if (res.code === 200) {
                                count+=1;
                                if(count===rows.length){
                                    insTb.reload({
                                        where: {orgId: selObj.data.id, status: 1},
                                        page: {curr: 1},
                                        url: '/office/org/queryUserList',
                                        parseData: function (res) {
                                            return {
                                                "code": 0,
                                                "msg": "",
                                                "count": res.obj.total,
                                                "data": res.obj.rows
                                            }
                                        },
                                    });
                                }
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }

                        })
                    });


                    closeDialog();
                })
            }
        });

        /* 显示表单弹窗2 */
        function showEditModel2(rows) {
            if (!selObj) {
                showAlert('请选择组织');
                return
            }
            admin.open({
                type: 1,
                title: '修改组织',
                content: $('#userEditDialog').html(),
                area: ['60%', '80%'],
                success: function (layero, dIndex) {
                    $.post('/office/org/getOrgTree', function (res) {
                        for (var i = 0; i < res.obj.length; i++) {
                            res.obj[i].title = res.obj[i].organizationName;
                            res.obj[i].label = res.obj[i].organizationName;
                            res.obj[i].value = res.obj[i].id;
                        }
                        var orgId = selObj.data.id;
                        var fullPath = new String(orgId);
                        getPid(orgId);

                        function getPid(orgId) {
                            if (orgId) {
                                let temp = res.obj.find(item => {
                                    return item.id == orgId
                                });
                                fullPath = temp.parentOrgId + ',' + fullPath;
                                getPid(temp.parentOrgId);
                            }
                        }

                        fullPath = fullPath.substring(2, fullPath.length);
                        $("#cascader").val(fullPath);
                        treeData = layui.treeTable.pidToChildren(res.obj, 'id', 'parentOrgId');
                        cascader.render({
                            elem: '#cascader',
                            data: treeData,
                            changeOnSelect: true,
                            filterable: true,
                            onChange: function (values, data) {
                            }
                        });
                        form.render();
                    });
                    // 表单提交事件
                    form.on('submit(userEditSubmit)', function (data) {
                        var loadIndex = layer.load(2);
                        let accountList = rows.map(item => {
                            return item.account
                        })
                        let param = {
                            orgId: data.field.orgId.split(',').pop(),
                            accountListStr: accountList.join(',')
                        }
                        $.post('/office/hrEmployDetail/updateHrEmployDetailMulti', param, function (res) {
                            layer.close(loadIndex);
                            if (res.code === 200) {
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        })
                    });
                    // 弹窗不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        /* 删除2 */
        function doDel2(obj) {
            layer.confirm('确定要删除选中用户吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.get('../../json/ok.json', {
                    id: obj.data ? obj.data.userId : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (200 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

    });
</script>
</body>
</html>
